import {defineComponent, PropType, resolveComponent, h, toRefs, ref, watch, onMounted} from "vue";
import {ElForm, ElFormItem, ElRow, ElCol} from 'element-plus';
import type {FormInstance, FormProps, RowProps} from 'element-plus'
import {arrangeAssignment} from './config'
import {Rule} from './type'

const JsForm = defineComponent({
    props: {
        PropsConfig: {
            type: Object as PropType<FormProps>,
            default: {
                'label-width': '90px'
            }
        },
        Rule: {
            type: Array as PropType<Rule[]>,
            default: []
        },
        FormParams: {
            type: Object
        },
        FormRowProp: {
            type: Object as PropType<RowProps>,
            default: {
                justify: 'space-between',
                align: 'top'
            }
        },
        HasEvent: {
            type: Boolean,
            default: false
        },
        PlaceholderText: {
            type: Boolean,
            default: false
        }
    },
    setup(props, {slots, expose, emit}) {
        console.log(props.Rule, 'props.Rule')
        const FormRef = ref<FormInstance>()
        const {FormParams, FormRowProp, PropsConfig, HasEvent, PlaceholderText} = toRefs(props)

        function handleFormSlots(item) {
            if (PlaceholderText.value) {
                let textData = JSON.parse(JSON.stringify(item))
                textData.labelProps.placeholder = ''
                return arrangeAssignment(emit, textData, FormParams.value, HasEvent.value)
            } else {
                return arrangeAssignment(emit, item, FormParams.value, HasEvent.value)
            }
        }

        const resetForm = () => {
            FormRef.value.resetFields()
        }
        // 配置数据过滤
        const handleRuleFilter = () => {
            return props.Rule.filter(item => {
                if (!item.hasOwnProperty('hidden')) return item
                if (item.hidden === false) return item
            })
        }
        expose({
            FormRef,
            resetForm
        })
        return () => (
            <ElForm ref={FormRef} model={FormParams.value} {...PropsConfig.value}>
                <ElRow {...FormRowProp.value}>
                    {
                        handleRuleFilter().map(item => {
                            // 渲染插槽
                            if (item.type === 'slot') {
                                return (
                                    <ElCol {...item.col} >
                                        {slots[item.slotName]?.({...item, FormParams: FormParams.value})}
                                    </ElCol>
                                )
                            } else {
                                return (
                                    <ElCol {...item.col}>
                                        <ElFormItem {...item.props} >
                                            {
                                                handleFormSlots(item)
                                            }
                                        </ElFormItem>
                                    </ElCol>
                                )
                            }
                        })
                    }
                </ElRow>
            </ElForm>
        )
    }
})

export default JsForm
